<template>
  <div class="lookOld">
    <h4>基本信息</h4>
    <el-form :model="temp" class="fromData">
      <el-form-item label="序号:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.order_id }}</span>
      </el-form-item>
      <el-form-item label="订单号:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.order_no }}</span>
      </el-form-item>
      <el-form-item label="收货人:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.user_add_name }}</span>
      </el-form-item>
      <el-form-item label="电话:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.user_add_phone }}</span>
      </el-form-item>
      <el-form-item label="收货地址:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.user_add }}</span>
      </el-form-item>
      <el-form-item label="下单时间:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.add_time }}</span>
      </el-form-item>
      <el-form-item label="支付时间:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.delivery_time }}</span>
      </el-form-item>
      <el-form-item label="订单金额:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.order_amount }}元</span>
      </el-form-item>
      <el-form-item label="优惠金额:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.order_discount_amount }}元</span>
      </el-form-item>
      <el-form-item label="实付金额:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.order_pay_amount }}元</span>
      </el-form-item>
      <el-form-item label="订单状态:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.state }}</span>
      </el-form-item>
      <el-form-item label="配送类型:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.delivery_type }}</span>
      </el-form-item>
      <el-form-item label="配送费:" style="margin-right:25px;width:30%;float:left">
        <span>{{ temp.delivery_amount }}</span>
      </el-form-item>
    </el-form>
    <h4>订单商品</h4>
    <el-table
      :data="details"
      style="width: 80%;margin:auto; background: rgb(231, 231, 231);"
      :border="true"
      :highlight-current-row="true"
    >
      <el-table-column label="商品编号" width="140" align="center" class="tableData">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.goods_number }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.goods_img" alt="无图片" style="margin:auto;width:160px;height:160px;">
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="160" align="center" class="tableData">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.goods_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" width="120" align="center" class="tableData">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.order_type }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品数量" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.pay_number }}个</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品单价" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.goods_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="优惠金额" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.goods_discount_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.goods_pay_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="供货商" width="160" header-align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.supplier_name }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="success"
      style=" position: absolute;
  top:60px;
  right:50px;"
      @click="goBack"
    >返回</el-button>
    <el-button type="success" style=" position: absolute;bottom:50px;left:50%" @click="goBack">返回</el-button>
  </div>
</template>
<script>
import request from '@/utils/request'
import { getToken, getAccount } from '@/utils/auth'
export default {
  data() {
    return {
      details: [],
      temp: {},
      show: true,
      DataFrom: false,
      rules: {}
    }
  },
  mounted() {
    if (this.$route.query.id) {
      if (this.$route.query.id === '100000000') {
        this.goBack()
      } else {
        return request({
          url: '/v3/admin/order/detail',
          method: 'post',
          headers: {
            account_type: getAccount()
          },
          data: {
            order_no: this.$route.query.id.trim()
          }
        }).then(res => {
          if (res.tip === '成功') {
            if (res.state === 1) {
              res.state = '待支付'
            } else if (res.state === 2) {
              res.state = '待发货'
            } else if (res.state === 3) {
              res.state = '已发货'
            } else if (res.state === 4) {
              res.state = '已完成'
            } else if (res.state === 5) {
              res.state = '已关闭订单'
            } else if (res.state === 6) {
              res.state = '拼团订单已支付等待拼团完成'
            } else if (res.state === 7) {
              res.state = '退款中'
            } else if (res.state === 8) {
              res.state = '已退款'
            }
            if (res.delivery_type === 1) {
              res.delivery_type = '上门'
              res.delivery_amount = '2元'
            } else if (res.delivery_type === 2) {
              res.delivery_type = '自取'
              res.delivery_amount = '自取免费'
            }
            res.order_amount = res.order_amount / 100
            res.order_discount_amount = res.order_discount_amount / 100
            res.order_pay_amount = res.order_pay_amount / 100
            this.temp = res
            res.details.map((value, index) => {
              if (value.order_type === 1) {
                value.order_type = '普通商品'
              } else if (value.order_type === 2) {
                value.order_type = '抢购商品'
              } else if (value.order_type === 3) {
                value.order_type = '团购商品'
              }
              value.goods_pay_amount = value.goods_pay_amount / 100
              value.goods_discount_amount = value.goods_discount_amount / 100
              value.goods_amount = value.goods_amount / 100
            })
            this.details = res.details
          }
        })
      }
    } else {
      this.goBack()
    }
  },
  methods: {
    // 收货
    confirm() {
      this.DataFrom = true
    },
    // 返回
    goBack() {
      this.$router.push({ path: '/indents/oldIndent' })
    }
  }
}
</script>
<style lang="scss" scoped>
.lookOld {
  overflow: hidden;
  margin-top: 50px;
  padding: 40px;
  position: relative;
  padding-bottom: 200px;
  .fromData {
    padding: 20px;
    width: 80%;
    margin: auto;
    height: 350px;

  }
  .tebleData {
    width: 80%;
    margin: auto;
  }
}
</style>
